<template>
	<div class="page flex">
		<div class="background">
			<img src="/img/audio_icon.png" />
		</div>
		<div class="main flex">
			<div class="icon">
				<img src="/img/audio_icon.png" class="back" />
				<img src="https://file.shengmaapp.com/storage/aichat/20240401/8f3dbd1a7720d7b1c8bd883eb9b6f9e3.jpg" class="img" />
			</div>
			<h3 class="h3 Line2">美妙的同志之歌</h3>
			<div class="user flex">
				<img src="https://api.sora13.com/images/aisora-c/141797/20240623/8eafddff73eb42ee8c83daa188c69066_0.jpg" />
				<span class="text">MoonSet萤火虫</span>
			</div>
			<div class="lyrics" v-html="lyrics"></div>
			<div class="progressDiv flex">
				<span class="text">00:02</span>
				<el-slider class="elSlider" :value="2" :min="0" :max="100" :show-tooltip="false"></el-slider>
				<span class="text">03:10</span>
			</div>
			<div class="operDiv flex">
				<div class="item iconfont icon-shangyishou" style="font-size: 18px;color: rgba(255,255,255,0.86);transform: rotate(180deg) scale(1.2);"></div>
				<div class="item iconfont icon-pause-full" style="font-size: 26px;color: rgba(255,255,255,0.86);" v-if="true"></div>
				<div class="item iconfont icon-bofang2" style="font-size: 30px;color: rgba(255,255,255,0.86);" v-else></div>
				<div class="item iconfont icon-shangyishou" style="font-size: 18px;color: rgba(255,255,255,0.86);"></div>
			</div>
			<div class="openApp">下载《AI音乐生成》生成自己的音乐</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		head() {
			return {
				title: "外部分享页 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
				// 歌词
				lyrics: `[Instrumental Intro]<br/ ><br/ >
					[Verse 1]<br/ >
					Once upon a midnight dreary, while I pondered, weak and weary,<br/ >
					Over many a quaint and curious volume of forgotten lore—<br/ >
					While I nodded, nearly napping, suddenly there came a tapping,<br/ >
					As of some one gently rapping, rapping at my chamber door.<br/ >
					"'Tis some visitor," I muttered, "tapping at my chamber door—<br/ >
					Only this and nothing more."<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
				
					[Chorus]<br/ >
					Ah, distinctly I remember it was in the bleak December;<br/ >
					And each separate dying ember wrought its ghost upon the floor.<br/ >
					Eagerly I wished the morrow;—vainly I had sought to borrow<br/ >
					From my books surcease of sorrow—sorrow for the lost Lenore—<br/ >
					For the rare and radiant maiden whom the angels name Lenore—<br/ >
					Nameless here for evermore.<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
				
					[Verse 2]<br/ >
					And the silken, sad, uncertain rustling of each purple curtain<br/ >
					Thrilled me—filled me with fantastic terrors never felt before;<br/ >
					So that now, to still the beating of my heart, I stood repeating<br/ >
					"'Tis some visitor entreating entrance at my chamber door—<br/ >
					Some late visitor entreating entrance at my chamber door;—<br/ >
					This it is and nothing more."<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
				
					[Chorus]<br/ >
					Ah, distinctly I remember it was in the bleak December;<br/ >
					And each separate dying ember wrought its ghost upon the floor.<br/ >
					Eagerly I wished the morrow;—vainly I had sought to borrow<br/ >
					From my books surcease of sorrow—sorrow for the lost Lenore—<br/ >
					For the rare and radiant maiden whom the angels name Lenore—<br/ >
					Nameless here for evermore.<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
				
					[Bridge]<br/ >
					Presently my soul grew stronger; hesitating then no longer,<br/ >
					"Sir," said I, "or Madam, truly your forgiveness I implore;<br/ >
					But the fact is I was napping, and so gently you came rapping,<br/ >
					And so faintly you came tapping, tapping at my chamber door,<br/ >
					That I scarce was sure I heard you"—here I opened wide the door;—<br/ >
					Darkness there and nothing more.<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
				
					[outro]<br/ >
					And the Raven, never flitting, still is sitting, still is sitting<br/ >
					On the pallid bust of Pallas just above my chamber door;<br/ >
					And his eyes have all the seeming of a demon’s that is dreaming,<br/ >
					And the lamp-light o’er him streaming throws his shadow on the floor;<br/ >
					And my soul from out that shadow that lies floating on the floor<br/ >
					Shall be lifted—nevermore!<br/ ><br/ >
				
					[Instrumental Solo]<br/ ><br/ >
					And his eyes have all the seeming of a demon’s that is dreaming,<br/ >
					And the lamp-light o’er him streaming throws his shadow on the floor;<br/ >
					And my soul from out that shadow that lies floating on the floor<br/ >
					Shall be lifted—nevermore!<br/ ><br/ >
				
					[End]<br/ >
				`
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0 22px;
		height: 100vh;
		width: 100vw;
		flex-direction: column;
		position: relative;
		background: #000;
		.background{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			img{
				width: 400px;
				height: 400px;
				filter: blur(120px);
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				transform: translate(-50%, -50%);
			}
		}
		.main{
			flex-direction: column;
			align-items: center;
			flex: 1;
			height: 0;
			position: relative;
			z-index: 2;
			padding-bottom: 20px;
			.icon{
				width: 73%;
				position: relative;
				.back{
					display: block;
					width: 100%;
				}
				.img{
					position: absolute;
					top: 63%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 42vw;
					height: 42vw;
					border-radius: 50%;
				}
			}
			.h3{
				font-weight: bold;
				font-size: 22px;
				line-height: 1.55;
				margin-top: 25px;
				color: #FFF;
			}
			.user{
				flex-direction: row;
				align-items: center;
				position: relative;
				margin-top: 12px;
				img{
					width: 22px;
					height: 22px;
					margin-right: 10px;
					border-radius: 50%;
				}
				.text{
					color: rgba(255,255,255,0.6);
					font-size: 15px;
				}
			}
			.lyrics{
				margin-top: 20px;
				color: rgba(255,255,255,0.9);
				font-size: 17px;
				line-height: 1.65;
				position: relative;
				overflow-y: auto;
				flex: 1;
				height: 0;
			}
			.progressDiv{
				margin-top: 10px;
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.text{
					color: rgba(255,255,255,0.86);
					font-size: 14px;
					font-weight: bold;
				}
				.elSlider{
					margin: 0 12px;
					width: 0;
					flex: 1;
				}
			}
			.operDiv{
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 10px;
				.item{
					margin-right: 36px;
					color: rgba(255,255,255,0.86);
					transition: 0.2s all;
					cursor: pointer;
					transform: scale(1.2);
					&:nth-last-child(1){
						margin-right: 0;
					}
					&:hover{
						opacity: 0.8;
					}
				}
			}
			.openApp{
				font-size: 13px;
				line-height: 32px;
				width: 75%;
				margin: 0 auto;
				text-align: center;
				border-radius: 100px;
				margin-top: 20px;
				color: #fff3bb;
				text-decoration: none;
				border: 1px solid #564c17;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
			}
		}
	}
</style>